import { BaseComponent, triggerManager, BaseComponentProps } from 'orionos-eve-core';
import { observer } from 'mobx-react';
import React, {useState} from 'react'
import { Text, View, Image, StyleSheet, TouchableWithoutFeedback, TouchableOpacity, FlatList } from 'react-native';
import { WebView } from 'react-native-webview'
import { BookTrigger } from './BookTrigger';
import { BookViewModel } from './BookViewModel';
import { BookVoice } from './BookVoice';

triggerManager.addTrigger(new BookTrigger());

const styles = StyleSheet.create({
    pageWrap:{
        width: '100%',
        height: '100%',
        backgroundColor: '#FAFAFA',
        paddingBottom: 55,
        position: 'relative',
    },
    searchBar: {
        width: '100%',
        position: 'absolute',
        bottom: 0,
        left: 0,
        height: 55,
        backgroundColor: '#4592cb',
    },
    bookCard: {
        padding: 10,
        flex: 1,
        flexDirection: 'row',
        borderWidth: 1,
        borderColor: 'rgba(212,212,212,0.7)',
        margin: 10,
        backgroundColor: '#EEEEEE',
    },
    bookItem:{
        flex: 1,
        flexDirection: 'row',
    },
    bookCover: {
        flex: 5,
        height: 85,
    },
    bookImg: {
        width: 64,
        height: 85,
    },
    bookContent: {
        flex: 11,
    },
    bookTitle:{
        fontWeight: 'bold',
    },
    abstract: {
        marginTop: 8,
        color: '#999999',
        fontSize: 12,
        lineHeight: 18,
    },
    touchView: {
        position: 'relative',
    },
    voiceWrap: {
        position: 'absolute',
        top: 8,
        marginLeft: 18,
        width: 40,
        height: 40,
        backgroundColor: 'white',
        borderRadius: 20,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    voiceIcon: {
        width: 24,
        height: 24,
    },
    questionInput: {
        marginLeft: 70,
        marginTop: 13,
        paddingLeft: 8,
        width: 460,
        height: 24,
        lineHeight: 24,
        borderRadius: 12,
        borderColor: '#CDCDCD',
        borderWidth: 1,
        backgroundColor: 'white',
        color: '#8f8f8f',
        overflow: 'hidden',
    }
})

const ImageItem = ({uri}: any)=>{
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(false)
    return (
        <Image 
            style={{width: 64, height: 85}}
            source={error ? require('../../img/cover.png') : {uri}}
            onLoad={()=>setLoading(false)}
            onError={()=>{
                setError(true)
                setLoading(false)
            }}
        ></Image>
    )
}



@observer
export class BookScreen extends BaseComponent<BaseComponentProps, BookViewModel, BookVoice>{
    private webview: any
    public viewModel: BookViewModel
    public constructor(props: BaseComponentProps){
        super(props)
        this.webview = React.createRef()
        this.viewModel = new BookViewModel();
        let voice = new BookVoice(this.viewModel);
        this.setViewModel(this.viewModel);
        this.setVoice(voice);
    }
    public componentDidMount() {
        //重写界面的didMount，必须调用super
        super.componentDidMount();
    }

    public componentWillMount() {

    }

    public componentWillUnmount() {
        //重写界面的Unmount，必须调用super
        super.componentWillUnmount();
    }
    public getBooks(){
        return this.viewModel.getBooks()
    }
    public render(){
        
        const bookItem = ({item}: any) => (
            <TouchableOpacity style={styles.bookCard} activeOpacity={0.6} onPress={()=>{this.viewModel.toDetail(item.id)}}>
                <View style={styles.bookItem}>
                    <View style={styles.bookCover}>
                        {item.coverImg ?
                            <ImageItem uri={item.coverImg}></ImageItem> :
                            <Image style={styles.bookImg} resizeMode="contain" source={require('../../img/cover.png')}></Image>
                        }
                    </View>
                    <View style={styles.bookContent}>
                        <Text style={styles.bookTitle} numberOfLines={1} ellipsizeMode="tail">{item.bookname}</Text>
                        <Text style={styles.abstract} numberOfLines={3.5} ellipsizeMode="tail">{item.abstract}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
        return (
            <View style={styles.pageWrap}>
                <FlatList
                    data={this.getBooks()}
                    numColumns={2}
                    renderItem={bookItem}
                    keyExtractor={(book: any) => book.id}
                />
                <View style={styles.searchBar}>
                    {this.viewModel.getVoiceOn() && 
                        <TouchableWithoutFeedback style={styles.touchView} onPress={()=>{this.viewModel.setVoiceOn(false)}}>
                            <View style={styles.voiceWrap}>
                                <Image style={styles.voiceIcon} source={require('../../img/voiceon.png')}></Image>
                            </View>
                        </TouchableWithoutFeedback>
                    }
                    {!this.viewModel.getVoiceOn() && 
                        <TouchableWithoutFeedback style={styles.touchView} onPress={()=>{this.viewModel.setVoiceOn(true)}}>
                            <View style={styles.voiceWrap}>
                                <Image style={styles.voiceIcon} source={require('../../img/voiceoff.png')}></Image>
                            </View>
                        </TouchableWithoutFeedback>
                    }

                    {this.viewModel.voiceOn && 
                        <Text style={styles.questionInput}>{this.viewModel.getInfoText()}</Text>
                    }
                </View>
            </View>
        )
    }
}

